<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .static{
            width:150px;
            height:150px;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
        }
        .a{
            background: firebrick;
        }
        .b{
            border:20px solid blueviolet;
            
        }
        .c{
            border-radius: 50%;
        }
        .mains{

        }
        .navs{
            width:440px;
            display: flex;
            justify-content: space-between;
        }
        .nav{
            width:100px;
            height:38px;
            border-radius: 10px;
            text-align: center;
            line-height: 38px;
            background: pink;
            color:#fff;
            cursor: pointer;
        }
        .nav.active{
            background: deeppink;
            color:aquamarine;
        }
        .content{

        }
        .citem{
            width:440px;
            height:440px;
            border-radius: 20px;
            color:#f50;
            font-size: 60px;
            background: darkorchid;
            text-align: center;
            line-height: 440px;
            margin-top:20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <div v-if="false">
            <h1 v-on:click.once ="count++">count == {{count }}</h1>
            <h2 @click="greet">hello world 1</h2>
            <h2 @click="greet($event)">hello world 2</h2>
            <button  @click="say('Are you Ok')">say some1</button>
            <button  @click="say('2114-daydayup')">say some2</button>
            <div @click="parentclick">
                <h2>WH2114-努力进步每一天</h2>
                <h2 @click.prevent="oneClick">事件修饰符 stop prevent once </h2>
                <h2 @click.stop="twoClick" >stop 一定阻止事件冒泡 </h2>
            </div>
            <p>
                <input type="text" placeholder="keydown" @keydown.enter.space.a.b.left ="getKeyCode">
            </p>
            <p>
                <input type="text" placeholder="keypress" @keypress.13.32="getKeyCode">
            </p>
            <p>
                <input type="text" placeholder="keyup" @keyup ="getKeyCode">
            </p>
            <p>
                <span>{{msg}}</span>
                <input type="text" placeholder="input" :value="msg" @input="getInputValue">
            </p>
            <p>
                <input type="text" placeholder="change" @change="getInputValue">
            </p>
            <p @mousemove="mouseMove" class="static a b c">
                mousemove
            </p>
            <p class="static a b c" @touchstart="touchstart">
                touchstart 
            </p>
        </div>
        <div>
            <h2>Vue 过滤器 </h2>
            <h2 v-bind:data-word="word | upper ">word == {{word | upper}}</h2>
            <h2 :data-message="message | lower">message == {{message  | lower }}</h2>
            <h2>num --- {{num | tofixed(1) }}</h2>
            <h2>date -- {{date | dateFormat}}</h2>
            <h2>val == {{val | format(3) }}</h2>
            <h2>tel == {{tel | telFormat(' ')}}</h2>
            <h2>money --- {{money | currency('$',6,4)   }}</h2>
            <h2>money --- {{money | currency2('$',0)   }}</h2>

        </div>
    </div>

    <script>
        // 全局注册过滤器 
        Vue.filter('upper',(value)=>{
            if(!value) return ''
            return value.toUpperCase()
        })
        Vue.filter("tofixed",(value,n)=>{
            if(!value) return ''
            n = n || 3;
            value = value * 1;
            return value.toFixed(n)
        })

        Vue.filter("dateFormat",(value)=>{
            if(!value) return '';
            var time = new Date(value)
            var year = time.getFullYear()
            var month = time.getMonth() + 1;
            var day = time.getDate()
            var hour = time.getHours()
            var min = time.getMinutes()
            var sec = time.getSeconds()
            return `${year}-${month}-${day} ${hour}:${min}:${sec}`
        })

        // 进制转化
        Vue.filter("format",(value,n)=>{
            if(!value) return ''
            n = n || 10;
            return value.toString(n) 
        })

        // 255   8   = 377 
        // 255   10  = 255
        // 255 / 10 =  25   - 5
        // 25  / 10  =  2    - 5
        // 2   / 10  = 0     - 2

        // 255  / 8  = 31   -  7
        // 31   /  8  =  3   - 7
        //   3  /8  =  0   - 3 

        // 255 / 16  =  15  - 15 
        //  15  / 16 =   0  - 15 
        // a b c d e f 
        Vue.filter("telFormat",(value,str)=>{
            if(!value) return ''
            str = str || ' - '
            value = value.toString().split('')
            value.splice(3,0,str);
            value.splice(8,0,str)
            return value.join("")
        })


        // 货币  $ ¥  
        // 加千位 , 
        // 保留多少位小数 
        Vue.filter("currency",(value,type,max=2,min=2)=>{
            if(!value) return ''
            type = type || '¥'
            return type + value.toLocaleString("en",{
                minimumFractionDigits:min,   // 最少保留几位小数
                maximumFractionDigits:max    // 最多保留几位小数 
            })
        }) 

        Vue.filter("currency2",(value,type="$",n=2)=>{
            if(!value) return ''
            value = value.toFixed(n).toString().split('.')
            console.log(value)
            var zheng = value[0]
            var xiao = value[1] 

            zheng = zheng.split("").reverse()
            zheng = zheng.map((item,index)=>{  // 映射 必须写返回值  
                if(index%3==0&&index!=0){
                    item = item+','     
                }
                return item;
            })
            xiao = xiao? '.'+xiao: '';
            value = type + zheng.reverse().join('')  + xiao;
            return value
        })

        const vm = new Vue({
            data:{
                title:"v-on 事件绑定",
                count:1000,
                msg:"2114 - 努力学好三阶段",
                word:"Are you OK ? WH2112 ",
                message:"WORK HARD FOR YOU",
                num:1314.5811110,
                date:new Date(),
                val:255,
                tel:18012341234,
                money:132843198132893.231
            },
            filters:{ // 局部过滤器
                lower(value){
                    if(!value) return '';
                    return value.toLowerCase()
                }
            },
            methods:{
                touchstart(e){
                    console.log(e)
                    console.log(e.touches[0].clientX)
                },
                mouseMove(e){
                    console.log(e.clientX)
                },
                getInputValue(e){
                    console.log(e.target.value)
                    this.msg = e.target.value 
                },
                getKeyCode(e){
                    console.log(e.keyCode)
                },
                parentclick(){
                    console.log("I am parent event")
                },
                oneClick(){
                    console.log('oneClick = prevent')
                },
                twoClick(){
                    console.log("twoClick - stop ")
                },
                greet(e){
                    console.log(e)
                },
                say(msg){
                    alert(msg)
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
            }
        }).$mount("#app")


    </script>
    <!-- 
        用特殊变量 $event
        函数调用时候的参数 是 实参
        函数定义时候的参数 是 形参 

        $event vue 提供的事件对象 参数 

        事件修饰符
        event.preventDefault()  阻止浏览器的默认事件
        event.stopPropagation()  阻止事件冒泡 

        v-on 提供了事件修饰符 
        .stop        阻止单击事件继续传播  
        .prevent     阻止浏览器的默认事件  
        .capture     
        .self
        .once        这个事件只能触发一次 
        .passive

        按键修饰符   键盘事件 (键盘码)
        enter    13 
        right    37 
        left
        space     32 
        up
        down 

        v-on:click  @click       
        input 
        change
        click
        dbclick
        keyup
        keydown
        keypress
        mousemove
        mousedown
        mouseup
        mouseenter
        mouserleave 
        touchstart   后面再讲 手机端的触摸事件 
        touchmove
        touchend

        原生绑定事件 (DOMO级事件  DOM2级 事件 )
        onclick="do()"  DOM0  
        document.getElementyById("box").onclick = fn;
        addEventListener("click",fn,false/true)  默认 false  false 冒泡   true 捕获   DOM2 
        removeEventListener("click")

        jquery 绑定事件 
        on  /  off   $('.box').on('click')
        bind  /  unbind  $('.box').bind('click')
        click()

        事件委托   ===> 基于事件冒泡的原理 把子元素的触发 父元素代替子元素执行 (给未来元素绑定事件 把事件绑定到父元素上去)
        $(parent).on('click',child,fn);    
        $(parent).delegate(child,'click',fn);   // 委托 

        过滤器  filter 
        Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化  (日期格式 货币格式)
        过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 
        “管道”符号指示   |
        
        Vue.filter 全局过滤器 
        filters 局部过滤器 

     -->
</body>
</html>